<template>
    <section class="chart-item">
      <div class="inner">
          <p class="time">
              <span>2018-08-08 08:08</span>
          </p>
          <div class="my-message clearfix">
              <div class="avtart float-right">
                  <img src="../../assets/meirong1.jpg" alt="">
              </div>
              <div class="float-right message-box">
                  <p class="nickname">啦啦啦啦啦</p>
                  <div class="message-detail float-right">
                      亲，你好！有关注到您有参加模特招募的活动，我院目前还有3未模特名额
                      ，项目支持：眼综合，鼻综合，脂肪移植，希望能帮助您变美，么么哒~亲
                      ，你好！有关注到您有参加模特招募的活动，我院目前还有3未模特名额，
                      项目支持：眼综合，鼻综合，脂肪移植，希望能帮助您变美，么么哒~亲，
                      你好！有关注到您有参加模特招募的活动，我院目前还有3未模特名额，项
                      目支持：眼综合，鼻综合，脂肪移植，希望能帮助您变美，么么哒~亲，你
                      好！有关注到您有参加模特招募的活动，我院目前还有3未模特名额，项目
                  </div>
              </div>
          </div>
          <div class="my-message clearfix">
              <div class="avtart float-right">
                  <img src="../../assets/meirong1.jpg" alt="">
              </div>
              <div class="float-right message-box">
                  <p class="nickname">啦啦啦啦啦</p>
                  <div class="message-detail float-right">
                      亲，你好！有关注到您有参加模特招募的活动，我院目前还有3未模特名额
                      ，项目支持：眼综合，鼻综合，脂肪移植，希望能帮助您变美，么么哒~亲
                      ，你好！有关注到您有参加模特招募的活动，我院目前还有3未模特名额，
                  </div>
              </div>
          </div>
          <p class="time">
              <span>2018-08-08 08:08</span>
          </p>
          <div class="reply-message clearfix">
              <div class="avtart float-left">
                  <img src="../../assets/meirong1.jpg" alt="">
              </div>
              <div class="float-left message-box">
                  <p class="nickname">红粉宝宝</p>
                  <div class="message-detail float-left">
                      亲，你好！有关注到您有参加模特招募的活动，我院目前还有3未模特名额
                      ，项目支持：眼综合，鼻综合，脂肪移植，希望能帮助您变美，么么哒~亲
                      ，你好！有关注到您有参加模特招募的活动，我院目前还有3未模特名额，
                  </div>
              </div>
          </div>
      </div>
    </section>
</template>

<script>
export default {
  name: 'ChartItem',
    props: {
        listinfo: {
            type: Array,
            required: true
        }
    }
}
</script>

<style scoped lang="less">
  @import "../../style/style.less";
  .chart-item {
      .inner {
          .time {
                text-align: center;
                margin: 10px 0;
                span {
                    display: inline-block;
                    height: 18px;
                    line-height: 18px;
                    background-color: #f2f2f2;
                    font-size: 13px;
                    color: #999;
                    border-radius: 18px;
                    padding: 0 10px;
                }
            }
          .my-message, .reply-message {
              margin-bottom: 15px;
          }
          .avtart {
              width: 64px;
              height: 64px;
              overflow: hidden;
              border-radius: 50%;
              img {
                  width: 100%;
                  height: 100%;
              }
          }
          .message-box {
              width: calc(~'100% - 200px');
          }
          .nickname {
              font-size: 12px;
              color: #666;
              line-height: 1.6;
          }
          .message-detail {
              border: 1px solid @theme-color-dark;
              border-radius: 10px;
              padding: 10px;
          }
          .my-message {
              .avtart {
                  margin-left: 16px;
              }
              .nickname {
                  text-align: right;
              }
              .message-detail {
                  background-color: @theme-color-light;
              }
          }
          .reply-message {
              .avtart {
                  margin-right: 16px;
              }
          }
      }
  }

</style>
